<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="content">
		<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
		<z-paging ref="paging" 
			v-model="dataList" 
			@query="queryList" 
			use-page-scroll 
			:scrollable="false" 
			:hide-empty-view="hideEmptyView"
			:refresher-enabled="false" 
			@contentHeightChanged="contentHeightChanged" 
			:auto="false" 
			:auto-clean-list-when-reload="false"
		>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
				<!-- <view class="shop-item" v-for="item in dataList" :key="item.id">
					<image :src="item.coverPic"/>
					<view>当季新款</view>
					<text>{{ item.name }}</text>
					<text>¥{{ functions.formatDollar(item.salePrice) }}</text>
				</view> -->
				<view class="shop-list">
					<view class="shop-item" v-for="item in dataList" :key="item.id" @click="toShopDetails(item.goodsId)">
						<image :src="item.coverPic"/>
						<view class="shop-tag">
							<view v-if="item.fineness">{{item.fineness}}</view>
							<view v-if="item.isNew == 1">当季新款</view>
						</view>
						<view class="shop-name">{{ item.name }}</view>
						<text>¥{{ functions.formatToUSD(item.salePrice) }}</text>
					</view>
				</view>
				
		</z-paging>
	</view>
</template>


<script setup>
	import { ref, watch } from 'vue';
	// import request from '/http/request.js';
  import { queryCollect } from '@/api/user.js'
	import {goodsList} from '@/api/shop.js'
	import functions from '../../utils/functions'
	
	const props = defineProps({
		//当前组件的index，也就是当前组件是swiper中的第几个
		tabIndex: {
			type: Number,
			default: function(){
				return 0
			}
		},
		//当前swiper切换到第几个index
		currentIndex: {
			type: Number,
			default: function(){
				return 0
			}
		},
		//当前分类id 
		typeId: {
			type: Number
		}
	})
	
	const emits = defineEmits(['heightChanged']);
	

	const paging = ref(null);
	
	const dataList = ref([]);
	const height = ref(0);
	const hideEmptyView = ref(true);
	const completeFunc = ref(null);


	watch(() => props.currentIndex, (newVal) => {
		if (newVal === props.tabIndex) {
			setTimeout(() => {
				paging.value.reload();
			}, 100);
		}
	}, {
		immediate: true
	});
	
	
	const queryList = async (pageNo, pageSize) => {
		let datas = {
      page:pageNo,
      pageSize:pageSize,
			typeId:props.typeId
    }
    try {
      let res = await goodsList(datas)
      const newRes = res.list
      paging.value.complete(newRes);
    } catch (error) {
      console.log('error',error)
      paging.value.complete(false);
    }
	};
	
	// 页面通知当前子组件刷新列表
	const reload = (tempCompleteFunc) => {
		// 先把父组件下拉刷新的回调函数存起来
		completeFunc.value = tempCompleteFunc;
		// 调用z-paging的reload方法
		paging.value.reload();
	}
	
	// 当列表高度改变时，通知页面的swiper同步更改高度
	const contentHeightChanged = (height) => {
		const finalHeight = dataList.value.length ? height : 0;
		// 限制内容最小高度为屏幕可见高度减z-tabs高度。注意，页面中有使用slot="top"插入的view，则此处的minHeight还应该减去slot="top"插入的view的高度
		const minHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
		emits('heightChanged',Math.max(finalHeight, minHeight));
	}
	
	// 页面通知当前子组件加载更多数据
	const doLoadMore = () => {
		paging.value.doLoadMore();
	}
	
	// 页面通知当前子组件清除数据
	const clear = () => {
		paging.value.clear();
		hideEmptyView.value= true;
	}

	const toShopDetails = (id) => {
		uni.navigateTo({
			 url: '/pages/shopDetails/index?id=' + id
		});
	}
	
	defineExpose({ reload, doLoadMore, clear });
	
</script>

<style lang="scss" scoped>
	/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
	/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */
	.content {
		height: 100%;
	}

	.shop-list{
		width: 100%;
		@include flex(row,space-between,flex-start,wrap);
	}
	.shop-item{
		width: 374rpx;
		height: 432rpx;
		margin-bottom: 2rpx;
		background: linear-gradient( 164deg, #FFFFFF 0%, #F8F8F8 100%);
		@include flex(column,flex-start,flex-start);
		image{
			width: 375rpx;
			height: 276rpx;
		}
		.shop-tag{
			width: 100%;
			height: 54rpx;
			margin-left: 30rpx;
			@include flex(row,flex-start);
			
			>view{
				// width: 100rpx;
				height: 30rpx;
				border: 1rpx solid #FE485B;
				font-weight: 400;
				font-size: 22rpx;
				color: #FE475B;
				text-align: center;
				line-height: 30rpx;
				margin-right: 12rpx;
				padding: 0 8rpx;
			}
			
		}
		.shop-name{
			width: 375rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			padding: 0 20rpx 0 30rpx;
			margin: 0 0 20rpx 0;
			box-sizing: border-box;
			@extend %text-overflow;
		}
		text:nth-of-type(1){
			font-family: Roboto, Roboto;
			font-weight: 500;
			font-size: 22rpx;
			color: #111111;
			padding-left: 30rpx;
		}
	}
</style>
